<template lang="pug">
  Modal.lzw-modal-style-1(v-model="diagnoseModal" fullscreen title="2D诊断表" :closable="false" :mask-closable="false")
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150" label-position="left")
      table.table-2d
        tr
          td(colspan="7")
            .ivu-table-cell
              FormItem.mb-0(label="客户名称：")
                b {{customerName}}
          td(colspan="6")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="沟通时间：")
                //- Input(v-model="formValidate.CommunicateTime" placeholder="请输入")
                DatePicker(v-model="formValidate.CommunicateTime" type="date" placeholder="请选择" @on-change="communicateTimeChange")
        tr
          td(colspan="13")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="参与人：")
                Input(v-model="formValidate.Participants")
        tr
          td(rowspan="9" style="width:150px")
            .ivu-table-cell <b>Define</b>
          td(rowspan="4")
            .ivu-table-cell.text-center <i class="red">G</i>oal
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="对象：")
                Input(v-model="formValidate.GoalTarget ")
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="时间：")
                //- Input(v-model="formValidate.GoalTime" placeholder="请选择")
                DatePicker(v-model="formValidate.GoalTime" type="date" placeholder="请选择" @on-change="goalTimeChange")
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="行为目标：")
                Input(v-model="formValidate.GoadAction" type="textarea" :rows="3")
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="结果：")
                Input(v-model="formValidate.GoadExpectation" type="textarea" :rows="3")
        tr
          td(rowspan="4")
            .ivu-table-cell.text-center <i class="red">A</i>ctual<br>situation
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="行为现状：")
                Input(v-model="formValidate.SituationStatus" type="textarea" :rows="3")
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="影响：")
                Input(v-model="formValidate.SituationEffect" type="textarea" :rows="3")
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="利益相关者的想法：")
                Input(v-model="formValidate.SituationThought" type="textarea" :rows="3")
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="竞争对手信息：")
                Input(v-model="formValidate.SituationComparison" type="textarea" :rows="3")
        tr
          td(colspan="1")
            .ivu-table-cell.text-center <i class="red">P</i>ondering
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="基于问题的反思：")
                Input(v-model="formValidate.Introspection" type="textarea" :rows="2")
        tr
          td(rowspan="6")
            .ivu-table-cell <b>Diagnose</b>
          td(rowspan="2")
            .ivu-table-cell.text-center 个人
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="意愿：")
                Input(v-model="formValidate.Desire" type="textarea" :rows="2")
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="能力：")
                Input(v-model="formValidate.Ability" type="textarea" :rows="2")
        tr
          td(rowspan="2")
            .ivu-table-cell.text-center 群体
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="氛围：")
                Input(v-model="formValidate.Atmosphere" type="textarea" :rows="2")
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="文化：")
                Input(v-model="formValidate.Culture" type="textarea" :rows="2")
        tr
          td(rowspan="2")
            .ivu-table-cell.text-center 组织
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="机制：")
                Input(v-model="formValidate.Mechanism" type="textarea" :rows="2")
        tr
          td(colspan="11")
            .ivu-table-cell
              FormItem.mb-0.ivu-form-item-required(label="流程：")
                Input(v-model="formValidate.Process" type="textarea" :rows="2")
        tr
          td(rowspan="18")
            .ivu-table-cell <b>Alignment</b>
          td(colspan="6")
            .ivu-table-cell.text-center 双方共识的原因
          td(colspan="6")
            .ivu-table-cell.text-center 可能的干预措施
        template(v-for="item in formValidate.Consensuses")
          tr
            td(colspan="6")
              .ivu-table-cell
                Input(v-model="item.ConsensusSummary")
            td(colspan="6")
              .ivu-table-cell
                Input(v-model="item.Action")
        tr
          td(colspan="12")
            .ivu-table-cell.text-center
              Button(type="success" size="small" long @click="addConsensuses") 增加
        tr
          td(colspan="6")
            .ivu-table-cell.text-center KNX行动计划
          td(colspan="6")
            .ivu-table-cell.text-center 客户行动计划
        template(v-for="item in formValidate.CoordinationPlans")
          tr
            td(colspan="6")
              .ivu-table-cell
                Input(v-model="item.Action")
            td(colspan="6")
              .ivu-table-cell
                Input(v-model="item.CustomerAction")
        tr
          td(colspan="12")
            .ivu-table-cell.text-center
              Button(type="success" size="small" long @click="addCoordinationPlans") 增加
    template(slot="footer")
        Button(type="info" :loading="btnLoading" :disabled="btnLoading" @click="handleSubmit('formValidate')") 提交
        Button(@click="cancel") 取消
</template>

<script>
import HRDCCustomerApi from '@/api/HRDCCustomer.api.js'

export default {
  props: {
    requirementId: String,
    customerName: String
  },
  data () {
    return {
      diagnoseModal: false,
      btnLoading: false,
      formValidate: {
        CommunicateTime: '', // 沟通时间
        Participants: '', // 参与人
        GoalTarget: '', // 对象
        GoadAction: '', // 行为目标
        GoadExpectation: '', // 结果
        SituationStatus: '', // 行为现状
        SituationEffect: '', // 影响
        SituationThought: '', // 利益者的相关想法
        SituationComparison: '', // 竞争对手信息
        Introspection: '', // 基于问题的反思
        Desire: '', // 意愿
        Ability: '', // 能力
        Atmosphere: '', // 氛围
        Culture: '', // 文化
        Mechanism: '', // 机制
        Process: '', // 流程
        Consensuses: [
          {
            ConsensusSummary: '', // 共识
            Action: '' // 采取的行动
          }
        ],
        CoordinationPlans: [
          {
            Action: '', // KNX行动计划
            CustomerAction: '' // 客户行动计划
          }
        ]
      },
      ruleValidate: {
        name: [
          { required: true, message: '', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    modalOpen () {
      this.diagnoseModal = true
    },
    handleSubmit () {
      HRDCCustomerApi.Post2DDiagnoseInfo(Object.assign({ requirementId: this.requirementId }, this.formValidate)).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.formValidate = {
            CommunicateTime: '', // 沟通时间
            Participants: '', // 参与人
            GoalTarget: '', // 对象
            GoadAction: '', // 行为目标
            GoadExpectation: '', // 结果
            SituationStatus: '', // 行为现状
            SituationEffect: '', // 影响
            SituationThought: '', // 利益者的相关想法
            SituationComparison: '', // 竞争对手信息
            Introspection: '', // 基于问题的反思
            Desire: '', // 意愿
            Ability: '', // 能力
            Atmosphere: '', // 氛围
            Culture: '', // 文化
            Mechanism: '', // 机制
            Process: '', // 流程
            Consensuses: [
              {
                ConsensusSummary: '', // 共识
                Action: '' // 采取的行动
              }
            ],
            CoordinationPlans: [
              {
                Action: '', // KNX行动计划
                CustomerAction: '' // 客户行动计划
              }
            ]
          }
          this.cancel()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    cancel () {
      this.diagnoseModal = false
      this.$emit('close-modal', false)
    },
    addConsensuses () {
      this.formValidate.Consensuses.push({
        ConsensusSummary: '', // 共识
        Action: '' // 采取的行动
      })
    },
    addCoordinationPlans () {
      this.formValidate.CoordinationPlans.push({
        Action: '', // KNX行动计划
        CustomerAction: '' // 客户行动计划
      })
    },
    communicateTimeChange (val) {
      this.formValidate.CommunicateTime = val
    },
    goalTimeChange (val) {
      this.formValidate.GoalTime = val
    }
  }
}
</script>

<style lang="less" scoped>
  .table-2d{
    width: 100%;
    border: 1px solid #e8eaec;
    border-collapse: collapse;
    tr{
      width: 100%;
    }
    td{
      // width: 200px;
      padding: 0;
      // min-width: 0;
      // height: 48px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      vertical-align: middle;
      border-right: 1px solid #e8eaec;
      border-bottom: 1px solid #e8eaec;
      .ivu-table-cell{
        padding: 5px 18px;
        overflow: inherit;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        box-sizing: border-box;
        .red{
          color: red;
        }
      }
    }
  }
</style>
